<template>
  <base-breadcrumb>
    <a-spin
      :spinning="spinning"
      style="margin: 0"
    >
      <a-card>
        <a-tabs
          v-model="nextStep"
          @change="callback"
        >
          <a-tab-pane
            key="1"
            tab="基本信息"
          >
            <a-form-model
              ref="basicForm"
              :model="dataInfo"
              :rules="basicRules"
              :hide-required-mark="true"
              :label-col="{ lg: { span: 6 }, sm: { span: 6 } }"
              :wrapper-col="{ lg: { span: 16 }, sm: { span: 16 } }"
            >
              <a-row :gutter="24">
                <a-col
                  :md="16"
                  :sm="16"
                >
                  <a-form-model-item
                    label="所属单位"
                    prop="projectId"
                  >
                    <org-tree-select
                      v-model="dataInfo.projectId"
                      is-auto-select-first
                      is-need-auth
                      check-strictly
                      @select="selectOrg"
                      @getProjectInfo="getProjectInfo"
                    />
                  </a-form-model-item>
                </a-col>
                <!--                <a-col :md="8" :sm="8">-->
                <!--                  <a-form-model-item label="所属分公司" prop="branchComId">-->
                <!--                    <SelectSubCompany placeholder="请选择" v-model="dataInfo.branchComId"></SelectSubCompany>-->
                <!--                  </a-form-model-item>-->
                <!--                </a-col>-->
                <!--                <a-col :md="8" :sm="8">-->
                <!--                  <a-form-model-item label="所属项目" prop="projectId">-->
                <!--                    <SelectProject-->
                <!--                      placeholder="请选择"-->
                <!--                      v-model="dataInfo.projectId"-->
                <!--                      :form="dataInfo"-->
                <!--                      :isClear="id == ''"-->
                <!--                      keyValue="branchComId"-->
                <!--                      @change="handleChange"-->
                <!--                      ref="selectProject"-->
                <!--                    ></SelectProject>-->
                <!--                  </a-form-model-item>-->
                <!--                </a-col>-->
              </a-row>
              <a-row :gutter="24">
                <a-col
                  :md="8"
                  :sm="8"
                >
                  <a-form-model-item label="名称">
                    <BaseInput
                      v-model="dataInfo.name"
                      disabled
                      placeholder="请输入"
                    />
                  </a-form-model-item>
                </a-col>
                <a-col
                  :md="8"
                  :sm="8"
                >
                  <a-form-model-item label="竣工时间">
                    <a-date-picker
                      v-model="dataInfo.projectTime"
                      disabled
                    />
                  </a-form-model-item>
                </a-col>
                <a-col
                  :md="8"
                  :sm="8"
                >
                  <a-form-model-item
                    label="竣备时间"
                    prop="completeDate"
                  >
                    <a-date-picker
                      v-model="dataInfo.completeDate"
                      format="YYYY-MM-DD"
                      @change="(date, dateString) => getTime(date, dateString, 'dataInfo', 'completeDate')"
                    />
                  </a-form-model-item>
                </a-col>
              </a-row>
              <a-row :gutter="24">
                <a-col
                  :md="16"
                  :sm="6"
                >
                  <a-form-model-item
                    label="竣工备案证扫描件"
                    :label-col="{ lg: { span: 3 }, sm: { span: 5 } }"
                    :wrapper-col="{ lg: { span: 18 }, sm: { span: 17 } }"
                    prop="completeFileInfoList"
                  >
                    <span class="fileList-tip">*</span>
                    <l-table
                      v-if="isUpdate"
                      :upload-arrys.sync="dataInfo.completeFileInfoList"
                      business-code="TM03"
                    />
                    <span v-if="isUpdate">提示：文件大小不可超过100M</span>
                  </a-form-model-item>
                </a-col>
              </a-row>
              <a-row :gutter="24">
                <a-col
                  :md="16"
                  :sm="6"
                >
                  <a-form-model-item
                    label="其他"
                    :label-col="{ lg: { span: 3 }, sm: { span: 5 } }"
                    :wrapper-col="{ lg: { span: 18 }, sm: { span: 17 } }"
                  >
                    <l-table
                      v-if="isUpdate"
                      :upload-arrys="dataInfo.reviewFileInfoVOList"
                      business-code="TM03"
                      @fileArrysData="fileArrysData"
                    />
                    <span v-if="isUpdate">提示：文件大小不可超过100M</span>
                  </a-form-model-item>
                </a-col>
              </a-row>
            </a-form-model>
          </a-tab-pane>
          <a-tab-pane
            key="2"
            tab="竣工资料"
          >
            <a-row :gutter="24">
              <a-col
                :md="4"
                :sm="4"
                class="col-center"
              >
                <h3>竣工资料分类</h3>

                <a-radio-group
                  :default-value="0"
                  style="width: 100%"
                  class="col-center"
                  button-style="solid"
                >
                  <div
                    v-for="(item, index) in dataInfo.templateOne"
                    :key="index"
                  >
                    <a-radio-button
                      :value="index"
                      style="width: 220px; text-align: center; margin-bottom: 20px"
                      @click="getRightList(item.id)"
                    >
                      <Ellipsis
                        tooltip
                        :length="16"
                        style="word-break: break-all"
                      >
                        {{ item.name }}
                      </Ellipsis>
                    </a-radio-button>
                  </div>
                </a-radio-group>
              </a-col>
              <a-col
                :md="20"
                :sm="20"
                class="col-left"
              >
                <TitleName title="竣工资料清单" />
                <a-table
                  style="width: 100%"
                  :data-source="dataInfo.templateTwo"
                  :columns="columns"
                  bordered
                  :pagination="false"
                  row-key="id"
                  :loading="loading.tmplItem"
                >
                  <!-- 操作 -->
                  <span
                    slot="action"
                    slot-scope="text, record"
                  >
                    <template>
                      <a @click="handleEditTmplItem(record)">编辑</a>
                    </template>
                  </span>
                  <span
                    v-if="text != null"
                    slot="isComplete"
                    slot-scope="text"
                  >{{
                    text && text != null ? '齐全' : '不齐全'
                  }}</span>
                </a-table>
              </a-col>
            </a-row>
          </a-tab-pane>
        </a-tabs>
      </a-card>
      <div class="tool-btns page-btn-right-top">
        <a-button
          v-if="nextStep == '2' && dataInfo.auditStatus == 'DRAFT'"
          class="ml12"
          type="danger"
          @click="discard(dataInfo)"
        >
          删除草稿
        </a-button>
        <a-button
          v-if="nextStep == '2'"
          type="primary"
          @click="save(0)"
        >
          保存草稿
        </a-button>
        <a-button
          v-if="nextStep == '1'"
          type="primary"
          @click="save(0)"
        >
          下一步
        </a-button>
        <a-button
          v-else
          type="primary"
          @click="save(1)"
        >
          提交
        </a-button>
        <a-button
          type="primary"
          @click="back()"
        >
          关闭
        </a-button>
      </div>
    </a-spin>
    <a-modal
      title="竣工项目资料归档清单添加"
      :width="900"
      :visible="visible"
      :confirm-loading="loading.isItemSvaing"
      @cancel="handleCancel"
      @ok="submit"
    >
      <a-form-model
        ref="ruleForm"
        :model="form"
        :rules="rules"
        :hide-required-mark="true"
        :label-col="{ lg: { span: 6 }, sm: { span: 6 } }"
        :wrapper-col="{ lg: { span: 16 }, sm: { span: 16 } }"
      >
        <a-row :gutter="24">
          <a-col
            :md="12"
            :sm="12"
          >
            <a-form-model-item
              label="资料名称："
              prop="name"
            >
              <span>{{ form.name }}</span>
            </a-form-model-item>
          </a-col>
          <a-col
            :md="12"
            :sm="12"
          >
            <a-form-model-item
              label="是否齐全："
              prop="isComplete"
            >
              <a-select
                v-model="form.isComplete"
                placeholder="请选择"
              >
                <a-select-option
                  v-for="(item, index) in isComplete"
                  :key="index"
                  :value="item.value"
                >
                  {{ item.name }}
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col
            :md="12"
            :sm="12"
          >
            <a-form-model-item
              label="资料份数："
              prop="size"
            >
              <BaseInputNumber
                v-model="form.size"
                placeholder="请输入"
                :max-length="9"
              />
            </a-form-model-item>
          </a-col>
          <a-col
            :md="12"
            :sm="12"
          >
            <a-form-model-item label="应保管期限：">
              <span>{{ form.storageTerm }}</span>
            </a-form-model-item>
          </a-col>
          <a-col
            :md="12"
            :sm="12"
          >
            <a-form-model-item
              label="保管起时间："
              prop="startDate"
            >
              <a-date-picker
                v-model="form.startDate"
                @change="onChange"
              />
            </a-form-model-item>
          </a-col>
          <a-col
            :md="12"
            :sm="12"
          >
            <a-form-model-item label="保管截止：">
              <span>{{ form.endDate }}</span>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </a-modal>
    <selectApprover
      :business-id="businessId"
      :process-config="setProcessConfig"
    />
  </base-breadcrumb>
</template>

<script>
import TitleName from '@/components/TitleName/index.vue'

import { Details, getDataInfo, saveData, getRightList, editDataInfo, increase, listDelete } from '@/api/standingBook.js'
import { getProjectInfo } from '@/api/businessAffairs/revenueAndCost'

const columns = [
  {
    title: '资料名称',
    dataIndex: 'name'
  },
  {
    title: '保管期限',
    dataIndex: 'storageTerm'
  },
  {
    title: '资料份数',
    dataIndex: 'size'
  },
  {
    title: '是否齐全',
    dataIndex: 'isComplete',
    scopedSlots: { customRender: 'isComplete' }
  },
  {
    title: '保管起止时间',
    dataIndex: 'custodyDate'
  },
  {
    title: '操作',
    dataIndex: 'action',
    scopedSlots: { customRender: 'action' }
  }
]
import Ellipsis from '@/components/Ellipsis'
import SelectSubCompany from '@/components/Select/SelectSubCompany' // 分公司
import SelectProject from '@/components/Select/SelectProject' // 分公司
// import { delete } from 'vue/types/umd'
export default {
  name: 'a' + Date.now(),
  components: {
    SelectSubCompany,
    SelectProject,
    TitleName,
    Ellipsis
  },
 async mounted() {
    // console.log(this.$route)
    this.id = this.$route.query.id
    if (this.$route.query.pageType == 'edit') {
      this.getDataInfo()
    }
   //获取通过获取流程配置值
    this.processConfig = await this.$getConfigFn('technology_completion_data')
  },
  data() {
    this.columns = columns
    return {
      loading: {
        tmplItem: false, // 竣工资料清单子项表格的加载状态
        isItemSvaing: false
      },
      spinning: false,
      id: '',
      visible: false,
      form: {
        isComplete: 1
      },
      rules: {
        isComplete: [{ required: true, message: '请选择资料是否齐全' }],
        size: [{ required: true, message: '请输入资料份数' }],
        startDate: [{ required: true, message: '请输入保管起时间' }]
      },
      defaultValue: 1,
      pageType: '',
      nextStep: '1',
      isComplete: [
        {
          name: '齐全',
          value: 1
        },
        {
          name: '不齐全',
          value: 0
        }
      ],
      dataInfo: {
        name: '',
        projectTime: ''
      },
      basicRules: {
        branchComId: [{ required: true, message: '请选择', trigger: 'change' }],
        projectId: [{ required: true, message: '请选择', trigger: 'change' }],
        completeDate: [{ required: true, message: '请选择', trigger: 'change' }],
        completeFileInfoList: [{ type: 'array', required: true, message: '请上传文件', trigger: 'blur' }]
      },
      isUpdate: true,
      leftId: '',
      //获取流程配置值
      processConfig: null,
      //点击提交发送流程配置值
      setProcessConfig: null,
      businessId: null
    }
  },
  methods: {
    selectOrg(val) {
      this.dataInfo.branchComId = val[val.length - 2].orgId
      const projectName = val[val.length-1].projectName
      this.dataInfo.name = projectName + '竣工资料'
    },
    discard(record) {
      let _this = this
      this.$confirm({
        title: '温馨提示',
        content: '确定是否删除数据？',
        okText: '确认',
        okType: 'danger',
        cancelText: '取消',
        onOk() {
          return listDelete({ id: record.id }).then(res => {
            _this.$message.success('删除成功！')
            _this.back()
          })
        },
        onCancel() {}
      })
    },
    callback(e) {
      console.log(this.dataInfo)
      if (this.nextStep == '2' && !this.dataInfo.id) {
        this.nextStep = '1'
        this.save(0)
      }
    },
    handleEditTmplItem(data) {
      this.visible = true
      this.form = { ...data }
      if (this.form.isComplete !== null) {
        this.form.isComplete = this.form.isComplete === true ? 1 : 0
      }
    },
    getProjectInfo(info) {
      this.dataInfo.projectTime = info.contractEndDate
    },
    // 关闭按钮
    //获取项目详情
    // handleChange(e) {
    //   this.getProjectInfo(e)
    //   const projectName = this.$refs.selectProject.getValueName(e)
    //   if (projectName !== void 0) {
    //     this.dataInfo.name = projectName + '竣工资料'
    //   } else {
    //     this.dataInfo.name = ''
    //   }
    // },
    // getProjectInfo(id) {
    //   if (!id) return
    //   let params = {
    //     projectId: id
    //   }
    //
    //   getProjectInfo(params).then(res => {
    //     // this.dataInfo.name = res.data.auditName
    //     this.dataInfo.projectTime = res.data.contractEndDate
    //   })
    // },
    back() {
      this.$multiTab.close(this.$route.fullpath)
    },
    fileArrysData: function(val) {
      this.dataInfo.reviewFileInfoVOList = val
    },
    onChange(date) {
      console.log(this.form)
      this.form.endDate = this.calculateDate(this.form.startDate, this.form.year)
    },
    getDataInfo() {
      if (!this.id) return
      let params = {
        id: this.id
      }
      this.isUpdate = false
      this.loading.tmplItem = true
      ;(this.spinning = true),
        getDataInfo(params)
          .then(res => {
            ;(this.spinning = false), (this.loading.tmplItem = false)
            this.isUpdate = true
            this.dataInfo = res.data
            this.getProjectInfo(this.dataInfo.projectId)
            this.dataInfo.templateTwo = []
            this.getRightList(this.dataInfo.templateOne[0].id)
          })
          .catch(() => {
            this.loading.tmplItem = false
          })
    },
    // 传值控制弹窗开关
    handleCancel() {
      this.visible = false
    },

    submit(e) {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          if (this.loading.isItemSvaing) return
          this.loading.isItemSvaing = true
          editDataInfo(this.form)
            .then(res => {
              this.visible = false
              this.loading.isItemSvaing = false
              this.updatetList()
              this.$message.success('保存成功')
            })
            .catch(() => {
              this.loading.isItemSvaing = false
            })
        }
      })
    },
    edit(e) {
      this.visible = true
    },
    updatetList() {
      if (this.leftId != '') {
        this.getRightList('')
      } else {
        this.getDataInfo()
      }
    },
    getRightList(id) {
      if (id != '') {
        this.leftId = id
      }
      let params = {
        id: this.leftId
      }
      this.loading.tmplItem = true
      getRightList(params)
        .then(res => {
          this.loading.tmplItem = false
          this.dataInfo.templateTwo = res.data
          this.dataInfo.templateTwo.forEach(item => {
            if (item.startDate) {
              item.endDate = this.calculateDate(item.startDate, item.year)
            }
          })
        })
        .catch(() => {
          this.loading.tmplItem = false
        })
    },
    getTime(date, dateString, type, name) {
      this[type][name] = dateString
      console.log(this[type][name])
    },
    calculateDate(dateText, year) {
      let date = new Date(dateText)
      date.setFullYear(date.getFullYear() + parseInt(year))
      date.setDate(date.getDate() - 1)
      return date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate()
    },
    save(auditStatus) {
      this.setProcessConfig = null;
      this.$refs.basicForm.validate(valid => {
        if (valid) {
          this.dataInfo.auditStatus = auditStatus
          this.spinning = true
          console.log(this.dataInfo)
          this.submitApprovalConfirm(auditStatus == 1 ? this.processConfig: 6, (flag)=>{
            if(!flag) {
              this.spinning = false
              return
            }
          if (this.dataInfo.id) {
            saveData(this.dataInfo).then(res => {
              this.spinning = false
              if (this.nextStep == '2') {
                if(auditStatus*1 ===1) {
                //提交时，返回id
                  this.businessId = res.data.id;
                  this.setProcessConfig = this.processConfig;
                  return
                }else{
                  this.back()
              }
              } else {
                this.nextStep = '2'
              }
            })
          } else {
            increase(this.dataInfo).then(res => {
              this.spinning = false
              this.dataInfo = res.data
              this.dataInfo.templateTwo = []
              if (this.dataInfo.templateOne.length) {
                this.getRightList(this.dataInfo.templateOne[0].id)
              }
              this.nextStep = '2'
               if(auditStatus*1 ===1) {
                //提交时，返回id
                  this.businessId = res.data.id;
                  this.setProcessConfig = this.processConfig;
                  return
                }
            })
          }
          })
        } else {
          this.nextStep = '1'
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
@deep: ~'>>>';
.tool-btns {
  display: flex;
  justify-content: flex-end;

  @{deep} .ant-btn + .ant-btn {
    margin-left: 12px;
  }
}

.col-center {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.col-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.foot-btn {
  display: flex;
  justify-content: space-between;
}

.FromButton {
  .btn {
    display: flex;
    justify-content: flex-end;
    width: 100%;

    button {
      margin-left: 20px;
      border-radius: 4px;
    }
  }
}

.ant-calendar-picker {
  width: 100%;
}

.draft {
  background-color: #039d12 !important;
  border-color: limegreen !important;
}

.a-card-table {
  margin-top: 24px;
}

.enclosureButton {
  display: flex;
  margin: 20px 0 20px 0;

  button {
    margin-left: 24px;
    width: 56px;
    height: 22px;
    border-color: rgb(217, 217, 217);
    border-radius: 6px;
    font-size: 12px;
    text-align: left;
    line-height: 18px;
  }
}

.foot-btn {
  display: flex;
  justify-content: flex-end;
}
.fileList-tip {
  position: absolute;
  z-index: 1000;
  left: -136px;
  top: -3px;
  color: red;
}
</style>
